<template>
  <div>
<button v-for="(item,index) in title" :key="index" @click="fn(index)">{{ item }}</button>
<slot :name="name" :data="title"></slot>
<button v-for="(item,index) in title" :key="index" @click="apply(index)">{{ item }}</button>
<component :is="life"></component>
  </div>
</template>

<script>
import OneCom from '@/components/OneCom.vue'
import TwoCom from '@/components/TwoCom.vue'
import ThreeCom from '@/components/ThreeCom.vue'
export default {
  data() {
	return {
		title:["娱乐新闻","军事新闻","政治新闻"],
		name:"one",
		life:"OneCom"
	}
  },
  mounted() {

  },
  methods: {
	fn(i){
		if(i==0){
			this.name="one"
		}else if(i==1){
			this.name="two"
		}else if(i==2){
			this.name="three"
		}
	},
	apply(i){
		if(i==0){
			this.life="OneCom"
		}else if(i==1){
			this.life="TwoCom"
		}else if(i==2){
			this.life="ThreeCom"
		}
	}
  },
  components:{
	OneCom,
	TwoCom,
	ThreeCom
  }
}
</script>
<style lang='less' scoped>

</style>